<template>
  <div class="common-layout">
    <el-container>

      <el-aside width="198.66px" class="common-aside">

        <el-row class="tac">
          <el-col :span="24" class="common-col">
            <el-menu active-text-color="#FFFFFF" background-color="biack" class="el-menu-vertical-demo" default-active="2"
              text-color="#FFFFFF" @open="handleOpen" @close="handleClose">
              <el-menu-item>
                <el-menu-item>
                  <router-link to="/" style="text-decoration: none; font-size: 18px; text-align: center;font-family: '微软雅黑', sans-serif; 
    color: white;">阿达西管理系统</router-link>
                </el-menu-item>
              </el-menu-item>
              <el-menu-item index="1">
                <el-icon>
                  <House />
                </el-icon>
                <router-link to="/" style="text-decoration: none;"><el-menu-item
                    index="1-1">首页</el-menu-item></router-link>
              </el-menu-item>
              <el-menu-item index="2">
                <el-icon>
                  <User />
                </el-icon>
                <router-link to="/user" style="text-decoration: none;"><el-menu-item
                    index="1-2">用户管理</el-menu-item></router-link>
              </el-menu-item>
              <el-menu-item index="3">
                <el-icon>
                  <Stamp />
                </el-icon>
                <router-link to="/passenger" style="text-decoration: none;"><el-menu-item
                    index="1-3">乘客管理</el-menu-item></router-link>
              </el-menu-item>
              <el-menu-item index="4">
                <el-icon>
                  <Promotion />
                </el-icon>
                <router-link to="/travel" style="text-decoration: none;"><el-menu-item
                    index="1-4">行程管理</el-menu-item></router-link>
              </el-menu-item>
              <el-menu-item index="5">
                <el-icon>
                  <Van />
                </el-icon>
                <router-link to="/car" style="text-decoration: none;"><el-menu-item
                    index="1-5">车辆管理</el-menu-item></router-link>
              </el-menu-item>
              <el-menu-item index="6">
                <el-icon>
                  <List />
                </el-icon>
                <router-link to="/response" style="text-decoration: none;"><el-menu-item
                    index="1-6">反馈管理</el-menu-item></router-link>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header style="background-color:;">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
            @select="handleSelect" style="background-color: #f7f7fad0;">
            <el-sub-menu index="2" class="head">
              <template #title><img src="https://picst.sunbangyan.cn/2023/10/02/sjrgpe.jpg" height="40"
                  width="40"></template>
              <el-menu-item index="2-2">设置</el-menu-item>
              <router-link to="/login"><el-menu-item index="2-3" v-show="sf">退出登陆</el-menu-item></router-link>
              <!-- <router-link to="/login"><el-menu-item index="2-3" v-show="!sf">登陆</el-menu-item></router-link> -->
            </el-sub-menu>
          </el-menu>
        </el-header>
        <el-main>
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import { Setting, User, House, Stamp, Promotion, Van,List } from '@element-plus/icons-vue'
// const sf = ref(Cookies.get('sf'))
const sf = ref(true)


const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
<style scoped>
.head {
  position: relative;
  left: 90%;
}

* {
  margin: 0;
  padding: 0;
}

.common-aside {
  min-height: 100%;
}

.flex-grow {
  flex-grow: 1;
}

.el-aside {
  background-color: #1010e8b2;
  bottom: 0;
  z-index: 100;
  min-height: 100vh;
  margin-right: 0;

}
</style>

